<script lang="ts" setup>
let last = ref<number>(0)
let btStart = ref<boolean>(false)
let timer: number

const startFood = () => {
  // 将按钮设置为禁用
  btStart.value = true
  const foods: NodeListOf<Element> = document.querySelectorAll('.food')
  let count = ref<number>(0)
  foods[last.value]?.classList.remove('select')

  timer = setInterval(() => {
    if (count.value > 10) {
      btStart.value = false
      foods[last.value].classList.add('select')
      clearTimeout(timer)
      return
    }
    let num = Math.floor(Math.random() * 20)
    last.value == num
      ? (last.value = Math.floor(Math.random() * 20))
      : (last.value = num)
    foods[last.value].classList.add('select')
    count.value++
    setTimeout(() => {
      count.value <= 10 ? foods[last.value].classList.remove('select') : null
    }, 200)
  }, 400)
}
</script>

<template>
  <div class="container">
    <h1>吃啥？</h1>
    <div class="menu">
      <div class="food">炒饭</div>
      <div class="food">干锅</div>
      <div class="food">米线</div>
      <div class="food">炸鸡</div>
      <div class="food">宽面</div>
      <div class="food">盒饭</div>
      <div class="food">烤鸭饭</div>
      <div class="food">火锅</div>
      <div class="food">烧烤</div>
      <div class="food">麻辣烫</div>
      <div class="food">烤肉</div>
      <div class="food">拉面</div>
      <div class="food">臭豆腐</div>
      <div class="food">抄手</div>
      <div class="food">鸡公煲</div>
      <div class="food">猪脚饭</div>
      <div class="food">食堂</div>
      <div class="food">汉堡</div>
      <div class="food">饺子</div>
      <div class="food">饼子</div>
    </div>
    <button class="start" @click.prevent="startFood" :disabled="btStart">
      开始
    </button>
  </div>
</template>

<style lang="less" scoped>
.container {
  width: 700px;
  height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;

  h1 {
    color: #fff;
    letter-spacing: 5px;
  }

  .start {
    margin-top: 20px;
    width: 200px;
    height: 50px;
    border: none;
    outline: none;
    background-color: aquamarine;
    transition: all 0.5s;

    &:hover {
      cursor: pointer;
      background-color: rgb(237, 234, 234);
      color: rgb(0, 0, 0);
      box-shadow: 0 0 10px rgb(132, 233, 226), 0 0 20px rgb(132, 233, 226),
        0 0 40px rgb(132, 233, 226), 0 0 80px rgb(132, 233, 226),
        0 0 160px rgb(132, 233, 226), 0 0 320px rgb(132, 233, 226);
    }
  }
  .start:disabled {
    cursor: no-drop;
  }

  .menu {
    display: flex;
    flex-wrap: wrap;
    width: 700px;
    height: 450px;

    .food {
      position: relative;
      margin-left: 30px;
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      border: 1px solid rgb(36, 179, 218);
      font-size: 18px;
      font-weight: 600;
      text-decoration: none;
      letter-spacing: 5px;
      color: #fff;
      filter: hue-rotate(calc(var(--x) * 60deg));
      transition: 0.5s;
      cursor: pointer;

      &::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        background: rgb(132, 233, 226);
        width: 20px;
        height: 2px;
        box-shadow: 5px -8px 0 rgb(132, 233, 226), 5px 8px 0 rgb(132, 233, 226);
        transition: width 0.5s, height 0.5s, left 0.5s, box-shadow 0.5s;
        transition-delay: 0s, 1s, 0s, 0.5s;
      }
    }

    .select {
      font-size: 18px;
      font-weight: 600;
      text-decoration: none;
      letter-spacing: 5px;
      filter: hue-rotate(calc(var(--x) * 60deg));
      cursor: pointer;
      background-color: rgb(237, 234, 234);
      color: rgb(0, 0, 0);
      box-shadow: 0 0 10px rgb(132, 233, 226), 0 0 20px rgb(132, 233, 226),
        0 0 40px rgb(132, 233, 226), 0 0 80px rgb(132, 233, 226),
        0 0 160px rgb(132, 233, 226), 0 0 320px rgb(132, 233, 226);
    }
  }
}
</style>
